<template>
	<view>
		<n-loading></n-loading>
		<top-bar :home="false" :backState="2000" :transparentFixedFontColor="storeAssembly.topTabFontColor" :type="storeAssembly.topTabType" title="口碑"></top-bar>
		<view class="publicPage" :style="{ paddingTop: (statusBarHeight*2+88) + 'rpx' }">
			<!-- 搜索及定位 -->
			<view class="searchAndLoc">
				<view class="locBox" @click="getCity">
					<u-icon name="map" color="#fff" size="32"></u-icon>
					{{storeAssembly.curCity}}
				</view>
				<view class="searchBox">
					<view class="search" @tap="storeSearchGo">
						<u-icon name="search" color="#999" size="32"></u-icon>
						<input type="text" :value="storeAssembly.storeName" placeholder="输入关键词搜索商家" />
					</view>
				</view>
			</view>
			<!-- 活动轮播 -->
			<view class="activitySwiper">
				<swiper class="swiper" @change="bannerChange" :autoplay="true">
					<swiper-item v-for="(item,index) of storeAssembly.banner" :key="index">
						<view class="bannerImgBox" @tap="goBannerInfo(item.type,item.content)">
							<dh-image class="banner" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
						</view>
					</swiper-item>
				</swiper>
				<view class="swiperDots">
					<view class="swiperDot" :class="{swiperDotActive:bCurrent==index}" v-for="(item,index) of storeAssembly.banner" :key="index"></view>
				</view>
			</view>
			<!-- 商家分类导航 -->
			<view class="storeNav">
				<view class="itemNav" @tap="storeListGo(0,'品质火锅')">
					<image src="https://lovebirdopen.com/static/img/svgIcon/storeNav1.png" mode=""></image>
					<view class="text">品质火锅</view>
				</view>
				<view class="itemNav" @tap="storeListGo(1,'午夜烧烤')">
					<image src="https://lovebirdopen.com/static/img/svgIcon/storeNav2.png" mode=""></image>
					<view class="text">午夜烧烤</view>
				</view>
				<view class="itemNav" @tap="storeListGo(2,'绝色夜宵')">
					<image src="https://lovebirdopen.com/static/img/svgIcon/storeNav3.png" mode=""></image>
					<view class="text">绝色夜宵</view>
				</view>
				<view class="itemNav" @tap="storeListGo(3,'美味中餐')">
					<image src="https://lovebirdopen.com/static/img/svgIcon/storeNav4.png" mode=""></image>
					<view class="text">美味中餐</view>
				</view>
			</view>
			<!-- 特色 -->
			<view class="characteristic">
				<image @click="pickRankingGo" class="fl" src="https://lovebirdopen.com/static/img/poster/characteristic1.png" mode=""></image>
				<image @click="giftVoucherGo" class="fr" src="https://lovebirdopen.com/static/img/poster/characteristic2.png" mode=""></image>
			</view>
			<!-- 商品类别 -->
			<view class="goodsNav">
				<view class="itemNav" :class="{itemNavEd:storeAssembly.waresType==1}" @tap="goodsNavChange(1)">
					<view class="tit">活动</view>
					<view class="tips">精彩狂欢</view>
				</view>
				<view class="itemNav" :class="{itemNavEd:storeAssembly.waresType==2}" @tap="goodsNavChange(2)">
					<view class="tit">商品</view>
					<view class="tips">海量选购</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="goodsList" v-if="storeAssembly.storeReady">
				<view class="nodata" v-if="storeAssembly.storeList.length==0">
					<image src="../../static/svgIcon/noStore.svg" mode=""></image>
					<view class="tips">暂无商品~</view>
				</view>
				<u-waterfall v-model="storeAssembly.storeList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="eachBox mrr" v-for="(item, index) in leftList" :key="index" @tap="goInfo(item.id)">
							<!-- 图片处、倒计时 -->
							<view class="goodsImgBox">
								<dh-image class="goodsImg" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
								<view class="toTheEnd" v-if="item.activity!=null && item.timedOut==false">距结束 
									<u-count-down class="u-countdown-nicc" :timestamp="item.countdown" separator="colon" bg-color="transparent" color="#FF5238" separator-color="#FF5238" separator-size="20" font-size="20"></u-count-down>
								</view>
								<view class="sold">已售{{item.buy_count}} <text>{{item.friend_buy_count}}个好友消费过</text></view>
								<view class="complete" v-if="item.activity!=null && item.timedOut==true">
									<image src="https://lovebirdopen.com/static/img/poster/complete.png" mode=""></image>
								</view>
							</view>
							<!-- 商品名称、标签 -->
							<view class="goodsName ellipsis2">
								<image v-if="index==0" class="hot" src="https://lovebirdopen.com/static/img/svgIcon/hot.svg" mode=""></image>
								<image v-if="index==1" class="top" src="https://lovebirdopen.com/static/img/svgIcon/top.svg" mode=""></image>
								{{item.name}}
							</view>
							<!-- 商品价格、折扣 -->
							<view class="goodsPrice">
								<text class="unit">¥</text>
								<text class="presentPrice">{{item.price}}</text>
								<text class="originalPrice">￥{{item.mktprice}}</text>
								<!-- <text class="discount" v-if="item.discount!=10">{{item.discount}}折</text> -->
							</view>
							<!-- 商品可抵扣金币 -->
							<view class="goodsGold">
								<image src="https://lovebirdopen.com/static/img/svgIcon/goodsGold.svg" mode=""></image>
								金币可抵{{item.score_deduction}}元
							</view>
							<!-- 券 -->
							<view class="shopCoupons"v-if="item.activities.coupon!=null">
								<view class="coupon ellipsis">
									<text class="ident">券</text>
									{{item.activities.coupon[0].name}}
								</view>
							</view>
							<!-- 商圈、距离 -->
							<view class="areaBox">
								<view class="fl ellipsis">{{item.store.name}}</view>
								<view class="fr">
									<u-icon name="map" color="#999" size="28"></u-icon>
									{{item.distance}}km
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="eachBox mrl" v-for="(item, index) in rightList" :key="index" @tap="goInfo(item.id)">
							<!-- 图片处、倒计时 -->
							<view class="goodsImgBox">
								<dh-image class="goodsImg" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
								<view class="toTheEnd" v-if="item.activity!=null && item.timedOut==false">距结束 
									<u-count-down class="u-countdown-nicc" :timestamp="item.countdown" separator="colon" bg-color="transparent" color="#FF5238" separator-color="#FF5238" separator-size="20" font-size="20"></u-count-down>
								</view>
								<view class="sold">已售{{item.buy_count}} <text>{{item.friend_buy_count}}个好友消费过</text></view>
								<view class="complete" v-if="item.activity!=null && item.timedOut==true">
									<image src="https://lovebirdopen.com/static/img/poster/complete.png" mode=""></image>
								</view>
							</view>
							<!-- 商品名称、标签 -->
							<view class="goodsName ellipsis2">
								<image v-if="index==1" class="hot" src="https://lovebirdopen.com/static/img/svgIcon/hot.svg" mode=""></image>
								<image v-if="index==0" class="top" src="https://lovebirdopen.com/static/img/svgIcon/top.svg" mode=""></image>
								{{item.name}}
							</view>
							<!-- 商品价格、折扣 -->
							<view class="goodsPrice">
								<text class="unit">¥</text>
								<text class="presentPrice">{{item.price}}</text>
								<text class="originalPrice">￥{{item.mktprice}}</text>
								<!-- <text class="discount" v-if="item.discount!=10">{{item.discount}}折</text> -->
							</view>
							<!-- 商品可抵扣金币 -->
							<view class="goodsGold">
								<image src="https://lovebirdopen.com/static/img/svgIcon/goodsGold.svg" mode=""></image>
								金币可抵{{item.score_deduction}}元
							</view>
							<!-- 券 -->
							<view class="shopCoupons"v-if="item.activities.coupon!=null">
								<view class="coupon ellipsis">
									<text class="ident">券</text>
									{{item.activities.coupon[0].name}}
								</view>
							</view>
							<!-- 商圈、距离 -->
							<view class="areaBox">
								<view class="fl ellipsis">{{item.store.name}}</view>
								<view class="fr">
									<u-icon name="map" color="#999" size="28"></u-icon>
									{{item.distance}}km
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 导航栏高度
				statusBarHeight: 0,
				// 
				bannerList:[
					{
						image:'https://lovebirdopen.com/file/2021/01/5a287970925b93c4ee6525e2f8218aba.jpg'
					},
					{
						image:'https://lovebirdopen.com/file/2020/12/5376c8c3b2b3060c988c898ae23e1deb.jpg'
					},
				],
				// 活动轮播当前
				bCurrent:0,
				// 商品导航当前
				goodsNav:0,
			}
		},
		props:["storeAssembly"],
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods: {
			// banner跳详情
			goBannerInfo(type,content){
				if(content!='' && content!=null){
					if(type==1){//文章
						uni.navigateTo({
							url: '/pages/index/newsDetail?id='+content
						});
					}else if(type==2){//url
						
					}else if(type==3){//商品
						uni.navigateTo({
							url: '/pages/index/goodsInfo?id='+content
						});
					}else if(type==4){//商铺
						uni.navigateTo({
							url: '/pages/publicPraise/storeInfo?id='+content
						});
					}
				}
			},
			getCity(){
				uni.navigateTo({
					url:"/pages/index/city"
				})
			},
			storeSearchGo(){
				uni.navigateTo({
					url:'/pages/publicPraise/storeSearch'
				})
			},
			bannerChange(e){
				this.bCurrent = e.detail.current;
			},
			// 去商家列表页
			storeListGo(i,tit){
				uni.navigateTo({
					url: '/pages/publicPraise/storeList?index='+i+'&tit='+tit
				});
			},
			// 甄选排行
			pickRankingGo(){
				uni.navigateTo({
					url: '/pages/publicPraise/pickRanking'
				});
			},
			// 百万礼券
			giftVoucherGo(){
				uni.navigateTo({
					url: '/pages/publicPraise/giftVoucher'
				});
			},
			// 切换商品的种类
			goodsNavChange(e){
				this.clear();
				this.$emit("goodsNavChange",e);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			// 商品详情跳转
			goInfo(id){
				uni.navigateTo({
					url: '/pages/index/goodsInfo?id='+id
				});
			},
		}
	}
</script>

<style lang="scss">
	.address {
		margin-top: 10rpx;
		padding-bottom: 8rpx;
		font-size: 24rpx;
		box-shadow: inset 0px -0.5px 0px #ECEEF0;
		
		text{
			margin-left: 16rpx;
		}
		.fr{
			float: right;
		}
	}

	.publicPage {
		padding: 0 32rpx 150rpx;
		min-height:95vh;
		background: url('https://lovebirdopen.com/static/img/cBj/storeBj.png') no-repeat top center #F8F8FA;
		background-size: 100% auto;
	}
	.searchAndLoc{
		padding: 16rpx 0;
		display: flex;
		
		.locBox{
			margin-right: 24rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.searchBox{
			flex: 1;
			width: 1px;
			.search{
				display: flex;
				height: 60rpx;
				align-items: center;
				background: #F8F8FA;
				border-radius: 36rpx;
				
				u-icon{
					margin: 0 16rpx 0 24rpx;
				}
			
				input{
					flex: 1;
					height: 60rpx;
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}

	.activitySwiper{
		position: relative;
		height: 240rpx;
		margin-bottom: 16rpx;
		.swiper{
			width: 100%;
			height: 100%;
			.bannerImgBox{
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				overflow: hidden;
				
				.banner {
					width: 100%;
					height: 100%;
				}
			}
		}
		.swiperDots {
			position: absolute;
			bottom: 8rpx;
			right: 0;
			width: 100%;
			text-align: center;
			font-size: 0;
			
			.swiperDot{
				display: inline-block;
				width: 16rpx;
				height: 8rpx;
				margin: 0 4rpx;
				background: #fff;
				border-radius: 2rpx;
			}
			
			.swiperDotActive{
				width: 32rpx;
				background: #FF5238;
			}
		}
	}
	
	.storeNav {
		padding: 30rpx 0;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		border-radius: 16rpx;
		
		.itemNav{
			flex: 1;
			text-align: center;
			image{
				display: inline-block;
				width: 72rpx;
				height: 72rpx;
			}
			.text{
				font-size: 24rpx;
				line-height: 40rpx;
				color: #333333;
			}
		}
	}

	.characteristic{
		height: 120rpx;
		margin-bottom: 20rpx;
		
		.fl{
			float: left;
			width: 332rpx;
			height: 100%;
		}
		.fr{
			float: right;
			width: 326rpx;
			height: 100%;
		}
	}
	
	.goodsNav{
		padding: 10rpx 22rpx;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;
		text-align: center;
		
		.itemNav{
			flex: 1;
			width: 1px;
			font-size: 0;
			
			.tit{
				margin-bottom: 4rpx;
				font-size: 32rpx;
				line-height: 48rpx;
				color: #666666;
			}
			.tips{
				display: inline-block;
				padding: 4rpx 8rpx;
				font-size: 20rpx;
				line-height: 22rpx;
				color: #999999;
				border-radius: 22rpx;
			}
		}
		.itemNavEd{
			.tit{
				color: #FF5238;
			}
			.tips{
				background: linear-gradient(276.81deg, #FF5238 8.46%, #FF7898 89.67%);
				color: #FFFFFF;
			}
		}
	}
	
	.goodsList{
		
	}
	.eachBox{
		padding: 16rpx;
		margin-bottom: 16rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.goodsImgBox{
			position: relative;
			width: 100%;
			height: 300rpx;
			border-radius: 8rpx;
			overflow: hidden;
			.goodsImg{
				width: 100%;
				height: 100%;
			}
			.toTheEnd{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 48rpx;
				padding: 0 16rpx;
				font-size: 20rpx;
				line-height: 48rpx;
				color: #FFFFFF;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
				border-radius: 8rpx;
				.u-countdown-nicc{
					margin-left: 8rpx;
					color: #FF5238;
				}
			}
			.sold{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 48rpx;
				padding: 0 16rpx;
				line-height: 48rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
				border-radius: 8rpx;
				text{
					float: right;
				}
			}
			.complete{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(255, 255, 255, 0.85);
				image{
					display: inline-block;
					width: 200rpx;
					height: 192rpx;
				}
			}
		}
		.goodsName{
			font-size: 32rpx;
			line-height: 48rpx;
			color: #333333;
			image{
				display: inline-block;
			}
			.hot{
				width: 26.5rpx;
				height: 32rpx;
			}
			.top{
				width: 70rpx;
				height: 30rpx;
			}
		}
		.goodsPrice{
			height: 48rpx;
			line-height: 48rpx;
			.unit{
				font-size: 24rpx;
				color: #FF5238;
			}
			.presentPrice{
				margin-right: 8rpx;
				font-size: 36rpx;
				color: #FF5238;
			}
			.originalPrice{
				font-size: 22rpx;
				color: #999;
				text-decoration-line: line-through;
			}
			.discount{
				float: right;
				position: relative;
				height: 36rpx;
				margin-top: 6rpx;
				display: inline-block;
				padding: 0 8rpx 0 4rpx;
				line-height: 36rpx;
				font-size: 20rpx;
				color: #fff;
				background-color: #FF5238;
				border-radius: 4rpx
			}
			.discount:after{
				position: absolute;
				content: '';
				top: 0;
				left: -35rpx;
				width: 36rpx;
				height: 100%;
				background: url('https://lovebirdopen.com/static/img/svgIcon/Intersect.svg') no-repeat right center;
				background-size: auto 100%;
			}
		}
		.goodsGold{
			height: 40rpx;
			display: flex;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #FF8A1E;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
		.shopCoupons{
			margin-bottom: 24rpx;
			.coupon{
				max-width: 70%;
				display: inline-block;
				padding: 4rpx;
				font-size: 20rpx;
				line-height: 32rpx;
				color: #FF5238;
				background: rgba(255, 82, 56, 0.12);
				border-radius: 42rpx;
				.ident{
					display: inline-block;
					width: 32rpx;
					height: 32rpx;
					margin-right: 4rpx;
					color: #fff;
					text-align: center;
					background: #FF5238;
					border-radius: 50%;
				}
			}
		}
		
		.areaBox{
			height: 40rpx;
			line-height: 40rpx;
			font-size: 24rpx;
			color: #999999;
			.fl{
				float: left;
				max-width: 60%;
			}
			.fr{
				float: right;
				text-align: right;
			}
		}
		
	}
	.mrl{
		margin-left: 10rpx;
	}
	.mrr{
		margin-right: 10rpx;
	}

	.itemShop {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 16rpx;
		padding: 20rpx;
		display: flex;
		// align-items: center;
		line-height: 40rpx;

		.storeLogo {
			width: 186rpx;
			height: 140rpx;
			margin-right: 20rpx;
			border-radius: 16rpx;
		}

		.shopRight {
			width: 1px;
			flex: auto;

			.labelBox {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
			}

			label {
				padding: 4rpx 10rpx;
				background: #FFEEEC;
				font-size: 22rpx;
				color: #FF5238;
				margin-right: 8rpx;
				border-radius: 4rpx;
				// border: 1rpx solid #FF5238;
			}
			.state_close{
				padding: 4rpx 10rpx;
				background: #ECEEF0;
				font-size: 22rpx;
				color: #999999;
				margin-right: 8rpx;
				border-radius: 4rpx;
				// border: 1rpx solid #999;
			}
			.phone {
				background-color: #FFFFFF;
				color: #FF5238;
				border: 1rpx solid #FF5238;
			}

			.distance {
				margin-left: auto;
				font-size: 24rpx;
				color: #FF5238;
			}
		}

		.shopName {
			font-size: 32rpx;
			font-weight: 500;
		}
	}
	.favourable{
		margin-top: 8rpx;
		display: flex;
		align-items: center;
		font-size: 12px;
		line-height: 18px;
		
		image{
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
		
		.yj{
			margin: 0 8rpx;
			text-decoration: line-through;
		}
	}
</style>
